<template>
  <div id="app">
    <button @click="tofoo">to foo页面</button>
    <button @click="tobar">to bar页面</button>
    <router-link to="/foo">到foo页面</router-link>
    <router-link to= "/bar">到bar页面</router-link>
    <router-link :to="{path:'/foo',query: {name, id}}">到foo页面带参数</router-link>
    <router-link :to="{name:'bar',params: {name, id}}">到bar页面带参数</router-link>
    <router-link :to="{name:'parent',params: {name, id}}">父子组件</router-link>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return{
      id:'003',
      name:'w5'
    }
  },
  mounted(){    
    var now = this.$moment('2018-01-01','YYYY-MM-DD');
    console.log('now.calendar():'+now.calendar())
    console.log('now.date():'+now.date())
    console.log('now.toDate():'+now.toDate())
    var day = new Date(2011, 9, 16);
    var dayWrapper = this.$moment(day);
    console.log(dayWrapper)

    console.log("   2010 13 is "+this.$moment("2010 13",           "YYYY MM").isValid())     // false (not a real month)
    this.$moment("2010 11 31",        "YYYY MM DD").isValid();  // false (not a real day)
    this.$moment("2010 2 29",         "YYYY MM DD").isValid();  // false (not a leap year)
    this.$moment("2010 notamonth 29", "YYYY MMM DD").isValid(); // false (not a real month name)
  },
  methods:{

    tofoo(){
      this.$router.push({ path: '/foo' ,query:{ id:'001',name:'z3'}})
    },
    tobar(){
      this.$router.push({ name: 'bar' ,params:{id:'002',name:'l4'}})
    },
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
